<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>浮动与单侧尺寸固定的流体布局</title>
    <style>

        body { font-size: 14px; background-color: #DDF3F7; color: #333; }
        a { color: #0082CB; text-decoration: none; }
        p { margin: 0; } img { border: 0; }
        .mib_body { width: 600px; margin-left: auto; margin-right: auto; -webkit-transition: width .35s; transition: width .35s; }
        .mib_x { margin-bottom: 10px; background-color: #fff; }

        /* 操作栏 */
        .mib_input { width: 70px; padding: 4px; font-size: 100%; }
        .mib_btn { width: 70px; padding: 5px; font-size: 100%; }



        .mib_list { padding: 20px; overflow: hidden; _zoom: 1; }

        /* 左侧 */
        .mib_head_a { width: 56px; float: left; }

        /* 右侧 */
        .mib_sms { line-height: 22px; padding-bottom: 6px; font-size: 14px; }
        .mib_vip { display: inline-block; width: 11px; height: 10px; margin-left: 1px; background: url(); }
        /* 下面这个是固定布局写法 */
        /* 缩小到一定地步,这种布局就不会再是左右布局,右侧会被挤下去 */
        .mib_feed_fixed { width: 484px; float: right; }
        /* 下面这个是流体布局写法 */
        .mib_feed_flow { margin-left: 76px; }

    </style>
</head>

<body>
<div id="mibBody" class="mib_body">
    <div class="mib_x">
        <div class="mib_list">
            <!--左-->
            <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_a">
                <img title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">
            </a>
            <!--右-->
            <div class="mib_feed_fixed">
                <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
                <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>
            </div>
        </div>
    </div>
    <div class="mib_x">
        <div class="mib_list">
            <!--左-->
            <a href="http://t.sina.com.cn/xuruoxuan" class="mib_head_a">
                <img title="徐若瑄VIVIAN" src="http://img.mukewang.com/53e2e9470001dfd200500050.jpg">
            </a>
            <!--右-->
            <div class="mib_feed_flow">
                <p class="mib_sms"><a title="徐若瑄VIVIAN" href="#">徐若瑄VIVIAN<i title="新浪认证" class="mib_vip"></i></a>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>
                <div class="feed_img"><img src="http://img.mukewang.com/53e2e9b10001948000890120.jpg" height="120"></div>
            </div>
        </div>
    </div>

    <div class="mib_x">
        <div class="mib_list">
            <p class="mib_sms">
                修改外框的宽度：<input type="number" id="mibInput" step="100" class="mib_input" value="600"> 像素
            </p>
            <button type="button" id="mibBtn" class="mib_btn">确定</button>
        </div>
    </div>
</div>
<script>
  var ele_mibBody = document.getElementById("mibBody"),
    ele_mibInput = document.getElementById("mibInput"),
    ele_mibBtn = document.getElementById("mibBtn");

  if ( ele_mibBody && ele_mibInput && ele_mibBtn ) {
    ele_mibBtn.onclick = function() {
      var value = ele_mibInput.value;
      if (!/^\d+$/.test(value)) {
        value = 600;
        ele_mibInput.value = value;
      }
      // 改变最外面容器的尺寸
      ele_mibBody.style.width = value + "px";
    };

    if (ele_mibInput.type == "number") {
      ele_mibInput.onchange = function() {
        ele_mibBtn.click();
      };
    }
  }
</script>
</body>
</html>
